<!DOCTYPE html>
<html>
<head>
<title>Fig. 3.88 Transmission Line Element</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f0f0f0;
    }
    canvas {
        background-color: #ffffff;
        border: 1px solid #ccc;
    }
</style>
</head>
<body>
<canvas id="canvas" width="600" height="550"></canvas>
<script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    // Style settings to emulate the hand-drawn look
    ctx.lineWidth = 2.5;
    ctx.strokeStyle = '#000000';
    ctx.fillStyle = '#000000';
    // A slightly informal, bold font
    ctx.font = 'bold 20px "Georgia", serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // --- Coordinates & Dimensions ---
    const x_start = 120;
    const x_end = 480;
    const dx_len = x_end - x_start;
    
    // Y positions for the abstract (top) part
    const y_i_marker_top = 70;
    const y_abstract_top = 110;
    const y_abstract_bot = 160;
    const y_pos_label_top = 185;
    
    // Y positions for the circuit (bottom) part
    const y_circuit_top = 300;
    const y_circuit_bot = 380;
    const y_pos_label_bot = 450;
    
    
    // --- TOP PART (Abstract Representation) ---
    
    // Main transmission lines
    ctx.beginPath();
    ctx.moveTo(x_start - 60, y_abstract_top);
    ctx.lineTo(x_end + 60, y_abstract_top);
    ctx.moveTo(x_start - 60, y_abstract_bot);
    ctx.lineTo(x_end + 60, y_abstract_bot);
    ctx.stroke();

    // dx dimension line and current markers
    ctx.beginPath();
    // Horizontal line for dx
    ctx.moveTo(x_start, y_i_marker_top);
    ctx.lineTo(x_end, y_i_marker_top);
    // Vertical terminators for dx line
    ctx.moveTo(x_start, y_i_marker_top - 8);
    ctx.lineTo(x_start, y_i_marker_top + 8);
    ctx.moveTo(x_end, y_i_marker_top - 8);
    ctx.lineTo(x_end, y_i_marker_top + 8);
    // Vertical lines down to the main wire
    ctx.moveTo(x_start, y_i_marker_top);
    ctx.lineTo(x_start, y_abstract_top);
    ctx.moveTo(x_end, y_i_marker_top);
    ctx.lineTo(x_end, y_abstract_top);
    ctx.stroke();

    // Text labels for current and dx
    ctx.fillText('dx', (x_start + x_end) / 2, y_i_marker_top - 20);
    ctx.textAlign = 'right';
    ctx.fillText('i(t, x)', x_start - 10, y_i_marker_top);
    ctx.textAlign = 'left';
    ctx.fillText('i(t, x+dx)', x_end + 10, y_i_marker_top);
    
    // Voltage indicators and labels
    ctx.beginPath();
    ctx.moveTo(x_start, y_abstract_top);
    ctx.lineTo(x_start, y_abstract_bot);
    ctx.moveTo(x_end, y_abstract_top);
    ctx.lineTo(x_end, y_abstract_bot);
    ctx.stroke();
    
    ctx.textAlign = 'right';
    ctx.fillText('u(t, x)', x_start - 10, (y_abstract_top + y_abstract_bot) / 2);
    ctx.textAlign = 'left';
    ctx.fillText('u(t, x+dx)', x_end + 10, (y_abstract_top + y_abstract_bot) / 2);
    
    
    // --- VERTICAL DASHED LINES & POSITION LABELS ---
    
    ctx.save();
    ctx.setLineDash([6, 6]);
    ctx.lineWidth = 1.5;
    ctx.beginPath();
    // Dashed line at x
    ctx.moveTo(x_start, y_abstract_bot);
    ctx.lineTo(x_start, y_circuit_bot + 60);
    // Dashed line at x+dx
    ctx.moveTo(x_end, y_abstract_bot);
    ctx.lineTo(x_end, y_circuit_bot + 60);
    ctx.stroke();
    ctx.restore();
    
    ctx.textAlign = 'center';
    ctx.fillText('x', x_start, y_pos_label_top);
    ctx.fillText('x+dx', x_end, y_pos_label_top);
    ctx.fillText('x', x_start, y_pos_label_bot);
    ctx.fillText('x+dx', x_end, y_pos_label_bot);
    
    
    // --- BOTTOM PART (Circuit Diagram) ---
    
    // Bottom ground line
    ctx.beginPath();
    ctx.moveTo(x_start, y_circuit_bot);
    ctx.lineTo(x_end, y_circuit_bot);
    ctx.stroke();
    
    // Component positions using proportions
    const inductor_x_start = x_start + dx_len * 0.1;
    const inductor_len = dx_len * 0.2;
    const resistor_x_start = inductor_x_start + inductor_len + dx_len * 0.1;
    const resistor_len = dx_len * 0.2;
    const node_x = resistor_x_start + resistor_len + dx_len * 0.15;
    
    // Top wire segment before inductor
    ctx.beginPath();
    ctx.moveTo(x_start, y_circuit_top);
    ctx.lineTo(inductor_x_start, y_circuit_top);
    ctx.stroke();
    
    // Inductor (coil)
    const coil_radius = 9;
    const num_coils = 4;
    const coil_len_single = inductor_len / num_coils;
    ctx.beginPath();
    ctx.moveTo(inductor_x_start, y_circuit_top);
    for (let i = 0; i < num_coils; i++) {
        ctx.arc(inductor_x_start + i * coil_len_single + coil_len_single/2, y_circuit_top, coil_radius, Math.PI, 2*Math.PI, false);
    }
    // Connect the end of the coil
    ctx.lineTo(inductor_x_start + inductor_len, y_circuit_top);
    ctx.stroke();
    ctx.fillText('ldx', inductor_x_start + inductor_len / 2, y_circuit_top - 30);
    
    // Wire between L and R
    ctx.beginPath();
    ctx.moveTo(inductor_x_start + inductor_len, y_circuit_top);
    ctx.lineTo(resistor_x_start, y_circuit_top);
    ctx.stroke();
    
    // Resistor (rectangle)
    const resistor_h = 22;
    ctx.strokeRect(resistor_x_start, y_circuit_top - resistor_h / 2, resistor_len, resistor_h);
    ctx.fillText('rdx', resistor_x_start + resistor_len / 2, y_circuit_top - 30);
    
    // Wire after resistor to node
    ctx.beginPath();
    ctx.moveTo(resistor_x_start + resistor_len, y_circuit_top);
    ctx.lineTo(node_x, y_circuit_top);
    ctx.stroke();
    
    // Wire from node to output
    ctx.beginPath();
    ctx.moveTo(node_x, y_circuit_top);
    ctx.lineTo(x_end, y_circuit_top);
    ctx.stroke();
    
    // Capacitor branch
    const cap_y_top_wire = y_circuit_top + 15;
    const cap_gap = 15;
    const cap_plate_len = 35;
    
    ctx.beginPath();
    ctx.moveTo(node_x, y_circuit_top);
    ctx.lineTo(node_x, cap_y_top_wire);
    // Top plate
    ctx.moveTo(node_x - cap_plate_len / 2, cap_y_top_wire);
    ctx.lineTo(node_x + cap_plate_len / 2, cap_y_top_wire);
    // Bottom plate
    ctx.moveTo(node_x - cap_plate_len / 2, cap_y_top_wire + cap_gap);
    ctx.lineTo(node_x + cap_plate_len / 2, cap_y_top_wire + cap_gap);
    // Wire to ground
    ctx.moveTo(node_x, cap_y_top_wire + cap_gap);
    ctx.lineTo(node_x, y_circuit_bot);
    ctx.stroke();
    
    ctx.textAlign = 'left';
    ctx.fillText('Cdx', node_x + 25, y_circuit_top + (y_circuit_bot - y_circuit_top)/2);

    // --- FIGURE CAPTION ---
    ctx.textAlign = 'center';
    ctx.font = '20px "Times New Roman", serif';
    ctx.fillText('Fig. 3.88', canvas.width / 2, y_pos_label_bot + 50);

</script>
</body>
</html>